<template>
  <div id="adminToolbar">
    <v-toolbar color="primary" fixed dark app>
      <v-toolbar-title class="ml-0 pl-3">
        <v-toolbar-side-icon @click.stop="handleDrawerToggle"></v-toolbar-side-icon>
      </v-toolbar-title>

      <v-spacer></v-spacer>
      <v-btn icon href="https://github.com/wangningkai/v-blog-front">
        <v-icon>fab fa-github</v-icon>
      </v-btn>
      <v-btn icon @click="handleFullScreen()">
        <v-icon>fullscreen</v-icon>
      </v-btn>
      <v-btn icon href :to="{path:'/'}">
        <v-icon>home</v-icon>
      </v-btn>
      <v-menu offset-x>
        <v-btn flat icon slot="activator" color="primary">
          <v-avatar size="32">
            <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="IMWNK">
          </v-avatar>
        </v-btn>

        <v-card>
          <v-list>
            <v-list-tile avatar>
              <v-list-tile-avatar>
                <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="IMWNK">
              </v-list-tile-avatar>
              <v-list-tile-content>
                <v-list-tile-title>WangNingkai</v-list-tile-title>
                <v-list-tile-sub-title>Founder of Lablog</v-list-tile-sub-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list>

          <v-divider></v-divider>

          <v-list>
            <v-list-tile
              v-for="(item,index) in items"
              :to="!item.href ? { name: item.name } : null"
              :href="item.href"
              @click="item.click"
              ripple="ripple"
              :disabled="item.disabled"
              :target="item.target"
              rel="noopener"
              :key="index"
            >
              <v-list-tile-action v-if="item.icon">
                <v-icon>{{ item.icon }}</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>{{ item.title }}</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list>
        </v-card>
      </v-menu>
    </v-toolbar>
  </div>
</template>
<script>
import Utils from '@/utils'
export default {
  name: 'admin-toolbar',
  components: {
    // NotificationList
  },
  data: () => ({
    menu: false,
    items: [
      {
        icon: 'account_circle',
        href: '#',
        title: '资料',
        click: (e) => {
          console.log(e)
        }
      },
      {
        name: 'config_site',
        icon: 'settings',
        title: '设置',
        click: (e) => {
          console.log(e)
        }
      },
      {
        icon: 'fullscreen_exit',
        href: '#',
        title: '登出',
        click: (e) => {
          window.getApp.$emit('APP_LOGOUT_SUCCESS')
        }
      }
    ]
  }),
  computed: {
    toolbarColor () {
      return this.$vuetify.options.extra.mainNav
    }
  },
  methods: {
    handleDrawerToggle () {
      window.getApp.$emit('APP_DRAWER_TOGGLED')
    },
    handleFullScreen () {
      Utils.toggleFullScreen()
    }
  }
}
</script>
